<template>
    <el-header style="text-align: right; font-size: 12px">
      <div class="toolbar">
        <el-dropdown>
          <el-icon style="margin-right: 8px; margin-top: 1px"
            ><setting
          /></el-icon>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
              @click="userQuite">退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <span>{{userInfo?.adminname}}</span>
      </div>
    </el-header>
  </template>
  
  <script>
  import { Menu as Setting } from "@element-plus/icons-vue";
  import {mapState,mapMutations} from "vuex";
  export default {
    created(){
      this.initPage();
    },
    methods:{
      ...mapMutations({
        cleanUserInfo:"cleanUserInfo",
        setLSUserInfo:"setLSUserInfo",
      }),
      initPage(){
        const ls=JSON.parse(localStorage.getItem("userInfo"));
        this.setLSUserInfo(ls);
      },
      userQuite(){
        this.cleanUserInfo({});
        this.$router.push("/");
      }
    },
    computed:{
      ...mapState({
        userInfo:"userInfo"
      })
    },
    components: {
      Setting,
    },
  };
  </script>
  
  <style></style>
  